<script type="text/javascript" src="js/angular/jquery.min.js"></script>
<script src="js/cookies/angular-cookies.js"></script>
<script src="js/cookies/jquery.cookie.min.js"></script>
<!--ui-boostarp-->
<script src="js/bootstrap-table/bootstrap-table.js"></script>
<!--ui-sortable-->
<style>
    .container{ width: 100%;}
</style>

<div class="container">
    <h1>表格</h1>
    <div>
        <input type="text" class="form-control" style="width:150px;float: left;" id="status">
        <button id="button" class="btn btn-default" style="float: left; margin-left: 10px;">后台查询</button>
    </div>
    <table id="table" data-toggle="table" data-show-columns="true"  data-search="true"  data-show-toggle="true" data-pagination="true" data-reorderable-columns="true">

    </table>
</div>
<script>
    $('#table').bootstrapTable({
        url:getRequestUrl("data1"),
        columns: [
            {field: "ids",title:'ids', checkbox: true},
            {field: "id",title:'id', sortable: true},
            {field: "name",title:'name', sortable: true},
            {field: "price",title:'<i class="ace-icon fa fa-clock-o bigger-110 hidden-480" style="margin-right:5px;"></i>price', sortable: true},
            {field: "price",title:'price', sortable: true,formatter:function () {
                return '<span class="label label-sm label-warning">Expiring</span>'
            }},
            {field: "编辑", title:'编辑', sortable: true,formatter:function(value,row,index){
                /*处理数据*/
                return "<a href='javascript:;' onclick='alert("+row.id+")'><i class='ace-icon fa fa-search-plus bigger-130'></i>编辑</a>&nbsp;&nbsp;<a href='javascript:;' onclick='alert("+index+")'><i class='ace-icon fa fa-trash-o bigger-130'></i>删除</a>";
            }}
        ],
        queryParams: queryParams
    });
    //默认加载时携带参数
    function queryParams(params) {
        var params = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageNo : Math.ceil(params.offset/params.limit) + 1, //页码
            pageSize : params.limit, //页面大小
            id: $('#status').val()
        };
        return params;
    }

    var $table = $('#table'),
        $button = $('#button');

    $(function () {
        $button.click(function () {
            $table.bootstrapTable('refresh', {});
        });
    });
</script>